<template>
	<view class="common ">
				<view class="main">
					
					<view class="banner">
						<view class="hello">
							你好，
						</view>
						<view class="welcome">
							欢迎登录车联网服务！
						</view>
					</view>
					<view class="form">
						<view class="card">
							<image src="/pacakgeBase/static/组 6.png" mode=""></image>
							
						</view>
						
						<uni-forms ref="baseForm" :modelValue="baseFormData">
							<uni-forms-item label="" required class="codeView">
								<uni-easyinput :inputBorder="false" v-model="baseFormData.mobile" placeholder="请输入手机号登录" />
							</uni-forms-item>
							
							<uni-forms-item label="" required class="codeView">
								<view class="code" @click="getCode">
									获取验证码
								</view>
								<uni-easyinput :inputBorder="false" v-model="baseFormData.code" placeholder="请输入验证码" />
							</uni-forms-item>
							
							
						</uni-forms> 
						<view>
						  <button class="btn" type="primary" @click="submit('baseForm')">登录</button>
						</view>
					</view>
					
		        </view>
				
		</view>

</template>

<script>
import { getCode,login } from "@/api/user/login.js";
	export default {
		
		data() {
			return {
			baseFormData:{
				mobile:null,
				code:null,
			}
			}
		},
		methods: {
			getCode(){
					console.log("点击了获取验证码");
					
					
					getCode(this.baseFormData.mobile).then((res)=>{
						uni.showToast({
						    title: '验证码已发送',
						    icon: 'none'
						});
						
					})
					.catch((err)=>{
						
						  console.log("验证码发送失败");
					})
			},
			submit(){
				let loginForm={
					phone:this.baseFormData.mobile,
					code:this.baseFormData.code
				}
				
				console.log('登录参数', loginForm);
				
				login(loginForm).then(res=>{
						console.log('登录成功接收数据vue', res);
							uni.reLaunch({
										url:"/pages/index/index"
									});
					
				})
				.catch(err=>{
					console.log('登录失败', err );
				})
			}
		},
		
		
	}
</script>

<style scoped>
	
	.common{
		height: 400rpx;
		background-size: 750rpx 400rpx;
		background-image: url("@/pacakgeBase/static/组 8.png");
	}
	
	.banner{
		height: 400rpx;
		padding-left: 100rpx !important;
		/* padding-top: 200rpx !important; */
		/* padding-bottom: 100rpx !important; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		row-gap: 20rpx;
		color: #fff;
		
	
		
	},
		.banner>.hello{
			font-size: 40rpx;
			font-weight: bold;
		}
	
	
	.common>.main{
		padding: 0rpx 0rpx 0rpx 0rpx;
		height: 100vh;
		}
		
		
	.form{
		margin-top: -100rpx;
		position: relative;
		background-color: #fff;
		padding: 100rpx 50rpx 100rpx 50rpx !important;
		flex: 1;
	}
	.card>image{
		width: 300rpx;
		height: 200rpx;
		position: absolute;
		right: 0rpx;
		top: -100rpx;
		z-index: 999;
	}
	.codeView{
		position: relative;
		border-bottom: 5rpx solid #eee;
		margin-bottom: 30rpx;
		
	}
	::v-deep .uni-forms-item__label{
			display: none;
	}
	 ::v-deep  .uni-easyinput__content-input{
		 padding-left: 5px !important;
	 }
	.code{
		position: absolute;
		right: 5rpx;
		bottom: 8rpx;
		color: #fff;
		z-index: 999;
		padding: 10rpx 25rpx;
		text-align: center;
		background-color: #4c8efe;
		border-radius: 30rpx;
		
	}
	::v-deep .is-required{
		display: none;
	}
	::v-deep .is-input-border  {
		border: none;
		
	}
	
	

/* 	.uni-forms{
		background-color: #fff;
	}
	.is-input-border{
	  border: 0 !important;
	}
	 */
	.btn{
		background: linear-gradient(to left, #0762e6 , #3687fe);
		background-color: #406cf3;
		border-radius: 30rpx;
	}

</style>